<template>
	<div class="max">
		<my-header :backBtn="true">
			<div slot="title">
				幼儿请假
			</div>
		</my-header>
		<div class="tl cont-nof">
			<div class="weui-cell">
				<div class="weui-cell__hd"><label class="weui-label">日期</label></div>
				<div class="weui-cell__bd">
					<input class="weui-input" @change="queryFn" v-model="params.day" type="date" style="font-size: 1.6rem;" />
				</div>
			</div>
			<div class="weui-cell weui-cell_select weui-cell_select-after">
				<div class="weui-cell__hd">
					<label class="weui-label">班级</label>
				</div>
				<div class="weui-cell__bd">
					<select class="weui-select" @change="queryFn" v-model="params.clazzId">
						<option :value="item.id" v-for="item in clazzList">{{item.gradeName}}-{{item.name}}</option>
					</select>
				</div>
			</div>
			<div class="weui-panel">
				<div class="weui-loadmore weui-loadmore_line" v-if="leaveList.length===0">
					<span class="weui-loadmore__tips">暂无数据</span>
				</div>
				<div class="weui-panel__bd" v-for="item in leaveList">
					<router-link :to="{path: '/leaveDetails',query:item}">
						<div class="weui-media-box weui-media-box_text">
							<h4 class="weui-media-box__title"> {{item.studentName}}</h4>
							<p class="weui-media-box__desc">{{item.reason}}</p>
							<ul class="weui-media-box__info">
								<li class="weui-media-box__info__meta">{{item.leaveType}}</li>
								<li class="weui-media-box__info__meta">{{item.createTime}}</li>
								<li class="weui-media-box__info__meta weui-media-box__info__meta_extra">{{item.clazzName}}</li>
							</ul>
						</div>
					</router-link>
				</div>
				<div class="weui-panel__ft" v-if="params.current<params.pages">
					<a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link" @click="loadmore">
						<div class="weui-cell__bd">查看更多</div>
						<span class="weui-cell__ft"></span>
					</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import PullTo from 'vue-pull-to';

	export default {
		components: {
			PullTo
		},
		data() {
			let time = this.$getNowDate('date');
			return {
				params: {
					current: 1,
					size: 10,
					pages: 0,
					total: 0,
					clazzId: '',
					day: time
				},
				menu: 0,
				leaveList: [],
				clazzList: []
			}
		},
		methods: {
			loadmore() {
				this.params.size += 10;
				this.queryFn();
			},
			queryFn() {
				this.$http.fetchStuLeave(this.params).then(resp => {
					let data = resp.data;
					this.leaveList = data.records;
					Object.assign(this.params, {
						current: data.current,
						size: data.size,
						pages: data.pages,
						total: data.total
					})
				})
			},
			fetchClazzList() {
				this.$http.fetchClazzList().then(resp => {
					let clazzList = resp.data;
					this.clazzList = clazzList;
					if (clazzList.length === 1) {
						this.params.clazzId = clazzList[0].id;
					}
					this.queryFn();
				})
			}
		},
		beforeDestroy() {
			this.$Cookies.set('menu', this.menu)
		},
		mounted() {
			this.fetchClazzList();
		}
	}
</script>

<style scoped>
	.leave-list {
		height: calc(100% - 5.6rem);
		overflow: auto;
	}
</style>
